<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 变换</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        /* 演示用样式 */
        .transform-demo {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }
        .transform-box {
            width: 100px;
            height: 100px;
            background-color: #0099cc;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px;
            transition: transform 0.3s ease;
        }
        .transform-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        .transform-label {
            margin-top: 10px;
            font-size: 14px;
            text-align: center;
        }
        .scale:hover {
            transform: scale(1.5);
        }
        .scale-x:hover {
            transform: scaleX(1.5);
        }
        .scale-y:hover {
            transform: scaleY(1.5);
        }
        .rotate:hover {
            transform: rotate(45deg);
        }
        .rotate3d:hover {
            transform: rotate3d(1, 1, 1, 45deg);
        }
        .translate:hover {
            transform: translate(20px, 20px);
        }
        .translate-x:hover {
            transform: translateX(20px);
        }
        .translate-y:hover {
            transform: translateY(20px);
        }
        .skew:hover {
            transform: skew(15deg, 15deg);
        }
        .skew-x:hover {
            transform: skewX(15deg);
        }
        .skew-y:hover {
            transform: skewY(15deg);
        }
        .matrix:hover {
            transform: matrix(1, 0.2, 0.2, 1, 10, 10);
        }
        .perspective-demo {
            perspective: 500px;
            margin: 50px 0;
        }
        .perspective-box {
            width: 150px;
            height: 150px;
            background-color: #0099cc;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.5s ease;
        }
        .perspective-rotate-x:hover {
            transform: rotateX(45deg);
        }
        .perspective-rotate-y:hover {
            transform: rotateY(45deg);
        }
        .perspective-rotate-z:hover {
            transform: rotateZ(45deg);
        }
        .transform-origin-demo {
            margin: 50px 0;
        }
        .origin-box {
            width: 100px;
            height: 100px;
            background-color: #0099cc;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.5s ease;
        }
        .origin-top-left {
            transform-origin: top left;
        }
        .origin-center {
            transform-origin: center;
        }
        .origin-bottom-right {
            transform-origin: bottom right;
        }
        .origin-box:hover {
            transform: rotate(45deg);
        }
        .transform-style-demo {
            perspective: 800px;
            margin: 50px 0;
        }
        .parent-box {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 153, 204, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.5s ease;
            transform-style: preserve-3d;
            margin: 0 auto;
        }
        .child-box {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 153, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotateY(0deg);
            transition: transform 0.5s ease 0.2s;
        }
        .parent-box:hover {
            transform: rotateY(30deg);
        }
        .parent-box:hover .child-box {
            transform: rotateY(60deg);
        }
        .backface-demo {
            perspective: 800px;
            margin: 50px 0;
            display: flex;
            justify-content: center;
        }
        .card {
            width: 200px;
            height: 300px;
            position: relative;
            transition: transform 1s;
            transform-style: preserve-3d;
            cursor: pointer;
        }
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }
        .card-front {
            background-color: #0099cc;
            color: white;
        }
        .card-back {
            background-color: #ff9900;
            color: white;
            transform: rotateY(180deg);
        }
        .card:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <nav>
        <a href="index.html">首页</a>
        <a href="css3-selectors.html">CSS选择器</a>
        <a href="css3-box-model.html">盒模型</a>
        <a href="css3-layout-flexbox.html">Flexbox布局</a>
        <a href="css3-layout-grid.html">Grid布局</a>
        <a href="css3-colors-gradients.html">颜色与渐变</a>
        <a href="css3-transforms.html">变换</a>
        <a href="css3-transitions-animations.html">过渡与动画</a>
        <a href="css3-responsive.html">响应式设计</a>
    </nav>

    <h1>CSS3 变换</h1>
    
    <section>
        <h2>变换基础</h2>
        <div class="example">
            <p>CSS3 变换（Transform）允许你以各种方式改变元素的形状、大小和位置，如缩放、旋转、倾斜和平移。变换不会影响文档流中的其他元素。</p>
            
            <div class="code">
                /* 基本语法 */
                transform: none;                 /* 默认值，无变换 */
                transform: transform-function;   /* 应用一个变换函数 */
                transform: transform-function transform-function;  /* 应用多个变换函数 */
            </div>
            
            <p>变换可以在 2D 或 3D 空间中进行。2D 变换在平面（X 和 Y 轴）上操作，而 3D 变换则增加了深度（Z 轴）。</p>
        </div>
        
        <div class="note">
            <p><strong>浏览器兼容性：</strong> 现代浏览器都支持 CSS3 变换，但在某些旧版浏览器中可能需要添加前缀（如 -webkit-、-moz-、-ms-）。</p>
        </div>
    </section>
    
    <section>
        <h2>2D 变换</h2>
        <div class="example">
            <h3>缩放（Scale）</h3>
            <div class="code">
                /* 等比例缩放 */
                transform: scale(1.5);      /* 放大到原始大小的 1.5 倍 */
                transform: scale(0.8);      /* 缩小到原始大小的 0.8 倍 */
                
                /* 分别缩放宽度和高度 */
                transform: scale(2, 1);     /* 宽度放大 2 倍，高度不变 */
                transform: scale(1, 1.5);   /* 宽度不变，高度放大 1.5 倍 */
                
                /* 单独缩放宽度或高度 */
                transform: scaleX(1.5);     /* 只缩放宽度 */
                transform: scaleY(1.5);     /* 只缩放高度 */
            </div>
            
            <div class="transform-demo">
                <div class="transform-container">
                    <div class="transform-box scale">Scale</div>
                    <div class="transform-label">scale(1.5)</div>
                </div>
                <div class="transform-container">
                    <div class="transform-box scale-x">ScaleX</div>
                    <div class="transform-label">scaleX(1.5)</div>
                </div>
                <div class="transform-container">
                    <div class="transform-box scale-y">ScaleY</div>
                    <div class="transform-label">scaleY(1.5)</div>
                </div>
            </div>
            
            <h3>旋转（Rotate）</h3>
            <div class="code">
                /* 顺时针旋转 */
                transform: rotate(45deg);    /* 旋转 45 度 */
                transform: rotate(0.5turn);  /* 旋转半圈（180 度） */
                transform: rotate(-90deg);   /* 逆时针旋转 90 度 */
            </div>
            
            <div class="transform-demo">
                <div class="transform-container">
                    <div class="transform-box rotate">Rotate</div>
                    <div class="transform-label">rotate(45deg)</div>
                </div>
            </div>
            
            <h3>平移（Translate）</h3>
            <div class="code">
                /* 同时在 X 和 Y 方向上平移 */
                transform: translate(20px, 30px);  /* 向右 20px，向下 30px */
                transform: translate(-10px, 5px);  /* 向左 10px，向下 5px */
                
                /* 只在 X 或 Y 方向上平移 */
                transform: translateX(20px);       /* 只在 X 方向上平移 */
                transform: translateY(30px);       /* 只在 Y 方向上平移 */
                
                /* 使用百分比（相对于元素自身尺寸） */
                transform: translate(50%, 50%);    /* 向右移动自身宽度的 50%，向下移动自身高度的 50% */
            </div>
            
            <div class="transform-demo">
                <div class="transform-container">
                    <div class="transform-box translate">Translate</div>
                    <div class="transform-label">translate(20px, 20px)</div>
                </div>
                <div class="transform-container">
                    <div class="transform-box translate-x">TranslateX</div>
                    <div class="transform-label">translateX(20px)</div>
                </div>
                <div class="transform-container">
                    <div class="transform-box translate-y">TranslateY</div>
                    <div class="transform-label">translateY(20px)</div>
                </div>
            </div>
            
            <h3>倾斜（Skew）</h3>
            <div class="code">
                /* 同时在 X 和 Y 方向上倾斜 */
                transform: skew(15deg, 10deg);  /* X 轴倾斜 15 度，Y 轴倾斜 10 度 */
                
                /* 只在 X 或 Y 方向上倾斜 */
                transform: skewX(15deg);        /* 只在 X 轴上倾斜 */
                transform: skewY(10deg);        /* 只在 Y 轴上倾斜 */
            </div>
            
            <div class="transform-demo">
                <div class="transform-container">
                    <div class="transform-box skew">Skew</div>
                    <div class="transform-label">skew(15deg, 15deg)</div>
                </div>
                <div class="transform-container">
                    <div class="transform-box skew-x">SkewX</div>
                    <div class="transform-label">skewX(15deg)</div>
                </div>
                <div class="transform-container">
                    <div class="transform-box skew-y">SkewY</div>
                    <div class="transform-label">skewY(15deg)</div>
                </div>
            </div>
            
            <h3>矩阵变换（Matrix）</h3>
            <div class="code">
                /* matrix(a, b, c, d, tx, ty) */
                transform: matrix(1, 0, 0, 1, 0, 0);    /* 恒等矩阵，无变换 */
                transform: matrix(1, 0.2, 0.2, 1, 10, 10);  /* 组合变换 */
            </div>
            <p>matrix() 函数允许你使用一个 2D 变换矩阵来定义变换。它可以实现上述所有 2D 变换的组合效果，但语法较为复杂。</p>
            
            <div class="transform-demo">
                <div class="transform-container">
                    <div class="transform-box matrix">Matrix</div>
                    <div class="transform-label">matrix(1, 0.2, 0.2, 1, 10, 10)</div>
                </div>
            </div>
        </div>
        
        <div class="note">
            <p><strong>组合变换：</strong> 可以在一个 transform 属性中组合多个变换函数。变换按照从右到左的顺序应用。例如：<code>transform: translateX(10px) rotate(45deg) scale(1.5);</code> 首先缩放，然后旋转，最后平移。</p>
        </div>
    </section>
    
    <section>
        <h2>3D 变换</h2>
        <div class="example">
            <p>3D 变换允许元素在三维空间中变换，增加了 Z 轴（深度）的概念。</p>
            
            <h3>3D 旋转</h3>
            <div class="code">
                /* 围绕 X、Y 或 Z 轴旋转 */
                transform: rotateX(45deg);    /* 围绕 X 轴旋转 */
                transform: rotateY(45deg);    /* 围绕 Y 轴旋转 */
                transform: rotateZ(45deg);    /* 围绕 Z 轴旋转（等同于 rotate(45deg)） */
                
                /* 围绕任意轴旋转 */
                transform: rotate3d(1, 1, 1, 45deg);  /* 围绕向量 (1,1,1) 旋转 45 度 */
            </div>
            
            <div class="perspective-demo">
                <div class="transform-container">
                    <div class="perspective-box perspective-rotate-x">rotateX</div>
                    <div class="transform-label">rotateX(45deg)</div>
                </div>
                <div class="transform-container">
                    <div class="perspective-box perspective-rotate-y">rotateY</div>
                    <div class="transform-label">rotateY(45deg)</div>
                </div>
                <div class="transform-container">
                    <div class="perspective-box perspective-rotate-z">rotateZ</div>
                    <div class="transform-label">rotateZ(45deg)</div>
                </div>
            </div>
            
            <h3>3D 平移</h3>
            <div class="code">
                /* 在 Z 轴上平移（调整深度） */
                transform: translateZ(20px);       /* 向前移动 20px（靠近观察者） */
                transform: translateZ(-20px);      /* 向后移动 20px（远离观察者） */
                
                /* 在三个轴上同时平移 */
                transform: translate3d(10px, 20px, 30px);  /* X, Y, Z 轴平移 */
            </div>
            
            <h3>3D 缩放</h3>
            <div class="code">
                /* 在 Z 轴上缩放 */
                transform: scaleZ(1.5);       /* Z 轴缩放 1.5 倍 */
                
                /* 在三个轴上同时缩放 */
                transform: scale3d(1.2, 1.2, 1.5);  /* X, Y, Z 轴缩放 */
            </div>
            
            <h3>透视（Perspective）</h3>
            <div class="code">
                /* 在父元素上设置透视 */
                perspective: 500px;  /* 较小的值 = 更强的透视效果 */
                
                /* 或者在变换中使用透视函数 */
                transform: perspective(500px) rotateY(45deg);
            </div>
            <p>透视属性定义了观察者与 z=0 平面的距离，从而使 3D 定位元素产生透视效果。</p>
        </div>
        
        <div class="note">
            <p><strong>3D 变换的关键：</strong> 要使 3D 变换看起来真实，需要设置透视（perspective）。透视可以在父元素上设置，也可以作为变换函数的一部分。</p>
        </div>
    </section>
    
    <section>
        <h2>变换相关属性</h2>
        <div class="example">
            <h3>transform-origin（变换原点）</h3>
            <div class="code">
                /* 使用关键字 */
                transform-origin: center;       /* 默认值，中心点 */
                transform-origin: top left;     /* 左上角 */
                transform-origin: bottom right; /* 右下角 */
                
                /* 使用具体值 */
                transform-origin: 100px 50px;   /* 距左边 100px，距上边 50px */
                transform-origin: 50% 50%;      /* 中心点（与 center 相同） */
                
                /* 3D 变换原点（包含 Z 轴） */
                transform-origin: center center 10px;  /* X, Y, Z 坐标 */
            </div>
            <p>transform-origin 属性指定元素变换的原点（旋转中心、缩放中心等）。</p>
            
            <div class="transform-origin-demo">
                <div class="transform-container">
                    <div class="origin-box origin-top-left">top left</div>
                    <div class="transform-label">transform-origin: top left;</div>
                </div>
                <div class="transform-container">
                    <div class="origin-box origin-center">center</div>
                    <div class="transform-label">transform-origin: center;</div>
                </div>
                <div class="transform-container">
                    <div class="origin-box origin-bottom-right">bottom right</div>
                    <div class="transform-label">transform-origin: bottom right;</div>
                </div>
            </div>
            
            <h3>transform-style（变换风格）</h3>
            <div class="code">
                transform-style: flat;         /* 默认值，子元素不保留 3D 空间 */
                transform-style: preserve-3d;   /* 子元素保留 3D 空间 */
            </div>
            <p>transform-style 属性指定子元素是位于 3D 空间中还是平面中。</p>
            
            <div class="transform-style-demo">
                <div class="parent-box">
                    父元素
                    <div class="child-box">子元素</div>
                </div>
                <p class="transform-label">父元素：transform-style: preserve-3d;<br>悬停查看效果</p>
            </div>
            
            <h3>perspective（透视）</h3>
            <div class="code">
                perspective: none;    /* 默认值，无透视效果 */
                perspective: 500px;   /* 设置透视距离 */
            </div>
            <p>perspective 属性指定观察者与 z=0 平面的距离，从而使 3D 定位元素产生透视效果。</p>
            
            <h3>perspective-origin（透视原点）</h3>
            <div class="code">
                perspective-origin: center;      /* 默认值，中心点 */
                perspective-origin: top left;    /* 左上角 */
                perspective-origin: 25% 75%;     /* 具体位置 */
            </div>
            <p>perspective-origin 属性指定透视的消失点位置。</p>
            
            <h3>backface-visibility（背面可见性）</h3>
            <div class="code">
                backface-visibility: visible;   /* 默认值，背面可见 */
                backface-visibility: hidden;    /* 背面不可见 */
            </div>
            <p>backface-visibility 属性指定当元素背向观察者时是否可见。</p>
            
            <div class="backface-demo">
                <div class="card">
                    <div class="card-front">正面</div>
                    <div class="card-back">背面</div>
                </div>
                <p class="transform-label" style="margin-left: 20px;">悬停查看卡片翻转效果<br>backface-visibility: hidden;</p>
            </div>
        </div>
    </section>
    
    <section>
        <h2>实际应用示例</h2>
        <div class="example">
            <h3>创建悬停效果</h3>
            <div class="code">
                .button {
                    padding: 10px 20px;
                    background-color: #0066cc;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    transition: transform 0.3s ease;
                }
                
                .button:hover {
                    transform: scale(1.1);  /* 悬停时放大 */
                }
            </div>
            
            <h3>创建卡片翻转效果</h3>
            <div class="code">
                .card {
                    width: 200px;
                    height: 300px;
                    position: relative;
                    perspective: 1000px;
                }
                
                .card-inner {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    transform-style: preserve-3d;
                    transition: transform 0.6s;
                }
                
                .card:hover .card-inner {
                    transform: rotateY(180deg);
                }
                
                .card-front, .card-back {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    backface-visibility: hidden;
                }
                
                .card-back {
                    transform: rotateY(180deg);
                }
            </div>
            
            <h3>创建 3D 立方体</h3>
            <div class="code">
                .cube {
                    width: 200px;
                    height: 200px;
                    position: relative;
                    transform-style: preserve-3d;
                    transform: rotateX(-30deg) rotateY(30deg);
                }
                
                .face {
                    position: absolute;
                    width: 200px;
                    height: 200px;
                    background: rgba(0, 102, 204, 0.7);
                    border: 2px solid white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 24px;
                    color: white;
                }
                
                .front  { transform: translateZ(100px); }
                .back   { transform: rotateY(180deg) translateZ(100px); }
                .right  { transform: rotateY(90deg) translateZ(100px); }
                .left   { transform: rotateY(-90deg) translateZ(100px); }
                .top    { transform: rotateX(90deg) translateZ(100px); }
                .bottom { transform: rotateX(-90deg) translateZ(100px); }
            </div>
            
            <h3>创建视差滚动效果</h3>
            <div class="code">
                .parallax-container {
                    height: 500px;
                    overflow: hidden;
                    position: relative;
                }
                
                .parallax-layer {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                }
                
                .parallax-bg {
                    background-image: url('background.jpg');
                    background-size: cover;
                    transform: translateZ(-1px) scale(2);
                }
                
                .parallax-content {
                    transform: translateZ(0);
                    padding: 50px;
                }
            </div>
        </div>
    </section>
    
    <section>
        <h2>变换的最佳实践</h2>